<template>
  <!--QQ群发列表窗口-->
  <div class="dialg" v-if="listshow">
      <div class="dialog_text qqlist">
        <el-row class="p_bottom20">
            <el-row class="title p_lr20">
            <el-col :span="20">QQ群发例表窗口</el-col>
            <el-col :span="4" class="t_right"><span @click="closeFn"><img class="close pointer" src="@/assets/img/plan/layerclose.png"></span></el-col>
            </el-row>
            <div class="dialog_text p_lr20">
                <el-row class="font_12 line_height42">
                    <el-col :span="3" class="pointer">
                        <div  @click="addgroupnameFn">
                            <img class="qqaddimg" src="@/assets/img/plan/QQadd.png" >
                        <span>新增</span>
                        </div>
                    </el-col>
                    <el-col :span="9" class="pointer">
                        <img class="qqaddimg" src="@/assets/img/plan/QQtest.png" >
                        <span>自动检测</span>
                    </el-col>
                    <el-col :span="12" class="color_ff8 t_right">限制:{{qqgrouplist.length}}/60</el-col>
                </el-row>
                <el-row class="qqgroup_list">
                    <div class="glist">
                        <div class="p_l12 p_r12 m_top5" v-for="(qqinfo, index) in qqgrouplist" :key="index">
                            <input class="addgroupname" type="text" v-model="qqinfo.groupname" />
                            <span class="font_12 color_99 m_left15 pointer">上移</span>
                            <span class="font_12 color_99 m_left15 pointer">下移</span>
                            <span class="font_12 color_99 m_left15 pointer" @click="delFn">删除</span>
                        </div>
                        <div class="p_l12 p_r12 m_top5" v-if="addtype">
                            <input class="addgroupname" type="text" v-model="addname" />
                            <span class="font_12 color_99 m_left15 pointer">上移</span>
                            <span class="font_12 color_99 m_left15 pointer">下移</span>
                            <span class="font_12 color_99 m_left15 pointer">删除</span>
                        </div>
                    </div>
                    <div class="font_12 p12">
                        <div class="color_33">需注意事项</div>
                        <div class="color_ff8">1、请保证要群发的QQ窗口已经打开。</div>
                        <div class="color_ff8">2、请保证要QQ群窗口是独立的。</div>
                    </div>
                </el-row>
                <el-row class="t_right font_12 m_top20">
                    <span class="qqlistbnt bg_colorE5 color_ff" @click="keepFn">保存</span>
                    <span class="qqlistbnt broder_1d color_33" @click="cansolFn">取消</span>        
                </el-row>
            </div>
        </el-row>
      </div>
  </div>

</template>

<script>
    export default {
      data () {
        return {
          addname: '',
          addtype: false,
          qqgrouplist: [
              {
                 groupname: '天天竟彩票群一'
              },
              {
                 groupname: '天天竟彩票群二'
              },
              {
                 groupname: '天天竟彩票群三'
              }
          ]
        }
    },
    props: {
        listshow: {
            type: Boolean
        }
    },
    created () {
             
    },
      methods: {
        addgroupnameFn () {
          this.addtype = true
        },
        cansolFn(){
            this.$emit('colseqqlist')
            // this.addtype = false
            // this.addname = ''
        },
       keepFn () {
            if (!this.addname && !this.addtype) {
                this.$toast({
                    message: '您还未点击新增'
                });
            } else if(!this.addname && this.addtype){
                this.$toast({
                    message: '请输入群名称'
                });
            } else {
                this.$toast({
                    message: '保存成功！'
                });
            }
       },
       delFn(){
           this.$toast({
                    message: '删除成功！'
                });
       },
       closeFn () {
           this.$emit('closeqqlist')
       }
      },
    }
</script>

<style lang="less" scoped>
  @import url(../../assets/css/public.less);
  @import url(../../assets/css/plan/planlayer.less);
  @import url(../../assets/css/plan/planpublic.less);
</style>
